<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId" :isPropagation="false">
    <template v-slot:common>
      <div class="wb-switch" :data-id="item.id" @click.stop>
        <van-switch v-model="selectedValue" active-color="#ee0a24" :size="getSwitchSize" @change="onChange"/>
        <span v-show="item.commonAttr.need">*</span>
      </div>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { formUtils } from '@/components/form/js/form-utils'
import { getPxOVwByValue } from '@/store/utils'
import { ref } from 'vue'

export default {
  name: "WbSwitch",
  mixins: [utils, formUtils],
  setup () {
    // –van-switch-size	30px
    // –van-switch-width	2em
    // –van-switch-height	1em
    // –van-switch-node-size	1em
    // –van-switch-node-background-color	var(–van-white)
    // –van-switch-node-box-shadow	0 3px 1px 0 rgba(0, 0, 0, 0.05)
    // –van-switch-background-color	var(–van-white)
    // –van-switch-on-background-color	var(–van-primary-color)
    // –van-switch-transition-duration	var(–van-animation-duration-base)
    // –van-switch-disabled-opacity	var(–van-disabled-opacity)
    // –van-switch-border var(–van-border-width-base) solid rgba(0, 0, 0, 0.1)
    const selectedValue = ref(true);
    return { selectedValue };
  },
  components: {
    InjectTemplate,
  },
  computed: {
    getSwitchSize() {
      return getPxOVwByValue(36)
    }
  },
  methods: {
    onChange() {
      this.updateInteractionData();
    }
  },
};
</script>

<style lang="scss">
.wb-switch {
  width: inherit;
  height: inherit;
}
</style>
